<template>
  <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
  <div class="top">
    <div class="collect">
      <van-icon
        style="color: rgb(255, 210, 30)"
        :name="iconName"
        @click="colloctHandler"
      />
    </div>
    <div class="time">
      <van-count-down :time="time" format="mm:ss" />
    </div>
    <div class="count">
      <span>{{ currentNum + 1 }}/ 20</span>
    </div>
  </div>
  <div class="question">
    <div class="question_title">{{ questionInfo.title }}</div>
    <div class="selections_container">
      <div
        class="selections"
        v-for="(item, index) in questionInfo.selections"
        :key="index"
        @click="select(item, $event)"
        ref="selection"
      >
        <div class="detailOption">
          {{ item.detailOption }}
        </div>
        <div class="detailContent">
          {{ item.detailContent }}
        </div>
      </div>
    </div>
  </div>
  <div class="button">
    <div style="visibility: hidden" class="button_front">&lt;上一题</div>
    <div class="button_determine" @click="judge()">确定</div>
    <div class="button_next" @click="nextQuestion()">下一题&gt;</div>
  </div>
  <div class="describe" ref="describe" style="display: none">
    <div class="myAnswer">你选择的答案：{{ myAnswer }}</div>
    <div class="answer">正确答案：{{ questionInfo.answer }}</div>
    <div>解析：{{ questionInfo.describe }}</div>
  </div>
  <div style="height: 2rem"></div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      returnName: "",
      time: 5 * 60 * 1000,
      getQuestionListQueryInfo: {
        methodName: "exerciseByChapter_getQuestionList",
        data: {
          count: 20,
          tsBookChapter: "",
          testLevel: "random",
          strategy: 3,
        },
      },
      getQuestionInfoByIdQueryInfo: {
        methodName: "exerciseByChapter_getQuestionInfoById",
        data: {
          param: "",
        },
      },
      noteAnswerResultQueryInfo: {
        methodName: "exerciseByChapter_noteAnswerResult",
        data: {
          majorId: "",
          questionId: "",
          answer: "",
          score: "",
        },
      },
      collectQuestionByIdQueryInfo: {
        methodName: "exerciseByChapter_collectQuestionById",
        data: { param: "" },
      },
      uncollctQuestionByIdQueryInfo: {
        methodName: "exerciseByChapter_uncollctQuestionById",
        data: { param: "" },
      },
      completeCurExerciseQueryInfo: {
        methodName: "exerciseByChapter_completeCurExercise",
        data: {
          majorId: "",
          totalScore: 0,
          titleCount: "",
          accuracy: "",
          consumeTime: "",
        },
      },
      questionlist: [],
      questionInfo: {},
      currentNum: 0,
      answer: [],
      score: 0,
      myAnswer: "",
      collect: 0,
      iconName: "star-o",
    };
  },
  created() {
    this.getRouterParams();
    this.getQuestionList();
  },
  destroyed() {
    this.completeCurExercise();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
      this.completeCurExercise();
    },
    // 获取路由传过来的参数
    getRouterParams() {
      console.log(this.$route.query);
      this.title = this.$route.query.title;
      this.returnName = this.$route.query.returnName;
    },
    // 获取题目列表
    async getQuestionList() {
      this.getQuestionListQueryInfo.data.tsBookChapter = this.returnName;
      const { data: res } = await this.$http.post(
        "/app/main",
        this.getQuestionListQueryInfo,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.questionlist = JSON.parse(res.data);
      console.log(this.questionlist);
      this.noteAnswerResultQueryInfo.data.majorId =
        this.questionlist.exerciseId;
      this.completeCurExerciseQueryInfo.data.majorId =
        this.questionlist.exerciseId;
      this.getQuestionInfoById();
    },
    // 根据题目id获取题目详细信息
    async getQuestionInfoById() {
      console.log(this.questionlist);
      this.getQuestionInfoByIdQueryInfo.data.param =
        this.questionlist.questionList[this.currentNum].tsExerciseTitleId;
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.getQuestionInfoByIdQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.questionInfo = JSON.parse(res.data).questionInfo;
      if (this.questionInfo.titleType == "03") {
        this.questionInfo.selections = [
          { detailOption: "T", detailContent: "" },
          { detailOption: "F", detailContent: "" },
        ];
      }
      console.log("questionInfo: ", this.questionInfo);
    },
    // 下一个题
    nextQuestion() {
      this.currentNum++;
      this.getQuestionInfoById();
      this.$refs.describe.style.display = "none";

      // 获取所有的selection 并清除选项
      let selections = this.$refs.selection;
      selections.forEach((item) => {
        item.classList.remove("selectionsActive");
      });
      this.iconName = "star-o";
      this.answer = [];
      this.myAnswer = "";
    },
    // 获取选中的选项
    select(item, e) {
      console.log(item);
      e.target.classList.toggle("selectionsActive");
      console.log(e.target);
      if (e.target.classList.contains("selectionsActive")) {
        this.answer.push(item.detailOption);
      } else {
        this.answer.splice(this.answer.indexOf(item.detailOption), 1);
      }
      console.log(this.answer);
    },
    // 判断题目是否正确 并且显示解析
    async judge() {
      if (this.answer.length === 1) {
        this.myAnswer = this.answer[0];
        console.log(this.myAnswer);
      } else {
        this.myAnswer = this.answer.sort().join("");
        console.log(this.myAnswer);
      }
      if (this.myAnswer == this.questionInfo.answer) {
        this.$refs.describe.style.display = "block";
        this.noteAnswerResultQueryInfo.data.score = 1;
        this.completeCurExerciseQueryInfo.data.totalScore++;
      } else {
        this.$refs.describe.style.display = "block";
        this.noteAnswerResultQueryInfo.data.score = 0;
      }
      this.noteAnswerResultQueryInfo.data.answer = this.myAnswer;
      this.noteAnswerResultQueryInfo.data.questionId =
        this.questionInfo.tsExerciseTitleId;
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.noteAnswerResultQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
    },
    // 点击收藏按钮
    colloctHandler() {
      if (this.iconName == "star-o") {
        this.iconName = "star";
        this.collectById();
      } else if (this.iconName == "star") {
        this.iconName = "star-o";
        this.uncollectById();
      }
    },
    // 收藏题目
    async collectById() {
      this.collectQuestionByIdQueryInfo.data.param =
        this.questionInfo.tsExerciseTitleId;
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.collectQuestionByIdQueryInfo),
        { headers: { "Content-Type": "application/json" } }
      );
      console.log(res);
    },
    // 取消收藏
    async uncollectById() {
      this.uncollctQuestionByIdQueryInfo.data.param =
        this.questionInfo.tsExerciseTitleId;
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.uncollctQuestionByIdQueryInfo),
        { headers: { "Content-Type": "application/json" } }
      );
      console.log(res);
    },
    // 完成此次练习
    async completeCurExercise() {
      this.completeCurExerciseQueryInfo.data.majorId =
        this.questionlist.exerciseId;
      this.completeCurExerciseQueryInfo.data.titleCount =
        this.questionlist.questionList.length;
      this.completeCurExerciseQueryInfo.data.accuracy = 52.0;
      this.completeCurExerciseQueryInfo.data.consumeTime = 152;
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.completeCurExerciseQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      console.log(res);
    },
  },
};
</script>

<style scoped>
.top {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.van-count-down {
  font-size: 4 0px;
}
.question {
  margin-top: 40px;
  font-size: 30px;
}
.question_title {
  margin-left: 20px;
}
.selections {
  margin: 20px 40px;
  padding: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  height: 50px;
  border: 1px solid #dddddd;
}
.selectionsActive {
  border: 1px solid #ead7c6;
  color: #ead7c6;
}
.selections .detailOption {
  width: 30px;
  height: 30px;
}
.button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  font-size: 30px;
}
.button_front {
  padding: 10px 20px;
  border-radius: 5%;
  margin: 30px;
  background-color: #ead7c6;
}
.button_determine {
  padding: 10px 20px;
  border-radius: 5%;
  margin: 30px;
  background-color: #ead7c6;
}
.button_next {
  padding: 10px 20px;
  border-radius: 5%;
  margin: 30px;
  background-color: #ead7c6;
}
.describe {
  background-color: #eaeaea;
  box-sizing: border-box;
  margin: 20px;
  padding: 20px;
  width: 95vw;
  font-size: 30px;
}
.myAnswer {
  color: #e92929;
}

.answer {
  color: #00a328;
}
</style>